<template>
  <el-container>
    <!-- <el-header></el-header> -->
    <el-row class="el-card-row outter-wrapper">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>科研项目信息</span>
        </div>
        <div class="text item">
          <!-- form表单 -->
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="上报人：">
                  <el-input
                    v-model="form.email"
                    disabled
                    placeholder="XXX"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="成果类型：">
                  <el-select
                    v-model="form.type"
                    placeholder="请选择成果类型"
                    disabled
                  >
                    <el-option label="科研项目" value="stuAward"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目名称：" prop="itemname">
                  <el-input v-model="form.itemname" placeholder="请输入项目名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目编号：" prop="itemno">
                  <el-input v-model="form.itemno" placeholder="请输入项目编号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目类别：" prop="itemtype">
                  <el-input v-model="form.itemtype" placeholder="请输入项目类别"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="批准单位：" prop="agreeunit">
                  <el-input v-model="form.agreeunit" placeholder="请输入项目批转单位"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="立项时间：" prop="setdate">
                  <el-date-picker
                    v-model="form.setdate"
                    type="date"
                    placeholder="请选择项目立项时间"
                    format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="经费[万元]：" prop="fee">
                  <el-input v-model="form.fee" placeholder="请输入项目经费,单位：万元"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="启动时间：" prop="startdate">
                  <el-date-picker
                    v-model="form.startdate"
                    type="date"
                    placeholder="请选择启动日期"
                    format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结项时间：" prop="enddate">
                  <el-date-picker
                    v-model="form.enddate"
                    type="date"
                    placeholder="请选择结项日期"
                    format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="参与身份：" prop="role">
                  <el-select
                    v-model="form.role"
                    placeholder="请选择您的参与身份"
                  >
                    <el-option label="负责人" value="0"></el-option>
                    <el-option label="参与人" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="实证文件：" prop="file">
                <el-upload
                  class="upload-demo"
                  :file-list="form.filelist"
                  :show-file-list="true"
                  drag
                  action="http://www.baidu.com"
                  :http-request="uploadFile"
                  :on-change="addFile"
                  :before-upload="beforeUpload"
                  :multiple="false"
                  :auto-upload="false"
                  accept=".zip"
                  :limit="1"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    将文件拖到此处，或<em>点击上传</em>
                  </div>
                  <div class="el-upload__tip" slot="tip">
                    只能上传单个zip压缩文件,重复上传会导致文件覆盖
                  </div>
                </el-upload>
              </el-form-item>
            </el-row>

            <el-row>
              <el-form-item>
                <el-button type="success" @click="onSubmit('form')">立即上报</el-button>
                <p class="upload-tip-info">退出后将不再保存此次填写的信息.</p>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </el-row></el-container
  >
</template>

<script>
import * as IndexService from '@/service/index/indexService'
import * as UploadService from '@/service/upload/uploadService'
export default {
  name: 'eduReformPaper',
  data() {
    return {
      form: {
        email: '', //上报人
        type: '科研项目',
        itemname: '', //项目名称
        itemno: '', //项目编号
        itemtype: '', //项目类别
        agreeunit: '', //批准单位
        setdate: '', //立项时间
        fee: '', //项目经费(万元)
        startdate: '', //项目启动时间
        enddate: '', //项目结项时间
        role: '', //参与身份[0-项目负责人;1-项目参与人]
        evidence: '', //实证材料url
        file: '', //文件
        filelist: [],
      },
      //表单验证规则
      rules:{
        itemname: [{required:true,message:"请输入科研项目名称",trigger:"blur"}],
        itemno: [{required:true,message:"请输入科研项目编号",trigger:"blur"}],
        itemtype: [{required:true,message:"请输入科研项目类别",trigger:"blur"}],
        agreeunit: [{required:true,message:"请输入科研项目批准单位",trigger:"blur"}],
        setdate: [{required:true,message:"请输入科研项目立项时间",trigger:"blur"}],
        fee:[{required:true,message:"请输入项目经费",trigger:"blur"}],
        startdate: [{required:true,message:"请输入项目启动时间",trigger:"blur"}],
        enddate: [{required:true,message:"请输入项目完成时间",trigger:"blur"}],
        role: [{required:true,message:"请选择您的参与身份",trigger:"blur"}],
        file:[{required:true,message:"请选择实证文件",trigger:"blur"}],
      }
    }
  },
  mounted() {
    //获取用户信息
    let email = localStorage.getItem('email')
    this.form.email = email ? email : 'XXX@xx.com'
  },
  methods: {
    //添加文件-添加文件、上传成功和上传失败时都会被调用
    addFile(file, fileList) {
      //记录文件名称
      this.form.file = file
      // console.log(this.form.file)
    },
    //文件上传之前文件类型检验
    beforeUpload(file) {
      // console.log(file)
    },
    //文件上传方法
    uploadFile(val) {
      // console.log(val)
    },

    //提交信息
    onSubmit(form) {
      // console.log('submit!')
      // console.log(this.form)
      //表单验证
      this.$refs[form].validate((valid)=>{
        //判断是否验证通过
        if (valid){
          //验证通过
          //1-文件上传
          let formData=new FormData();
          formData.append("file",this.form.file.raw);//二进制文件内容
          formData.append("username",this.form.email);//上报信息账户名
          UploadService.uploadFile(formData).then((res)=>{
            //判断是否上传成功
            if (res.data&&res.data.status){
              this.$message({
                message: '文件已上传！',
                type: 'success',
              })
              //2-获取文件存储路径
              this.form.evidence=res.data.url;
              //3-封装上传信息
              let sciSerrchItemObj={
                itemno:this.form.itemno,
                itemtype:this.form.itemtype,
                itemname:this.form.itemname,
                setdate:this.form.setdate,
                agreeunit:this.form.agreeunit,
                fee:this.form.fee,
                startdate:this.form.startdate,
                enddate:this.form.enddate,
                "itemPartner.partner":this.form.email,
                "itemPartner.role":this.form.role,
                "itemPartner.evidence":this.form.evidence
              }
              //4-科研项目基本信息信息上传
              IndexService.uploadSciSerrchItem(sciSerrchItemObj).then(res=>{
                if (res.data==1){
                  //信息上传成功
                  this.$message({
                    message:"信息上报成功!",
                    type:"success"
                  })
                }else {
                  //信息上传失败
                  this.$message.error("信息上报失败!")
                }
              })
            }else {
              //文件上传失败
              this.$message.error('文件上传出错,信息上报失败！')
            }
          }).catch(err=>{
            //文件上传出错
            this.$message.error('信息上报失败！');
            //尝试删除已上传的文件
            if (this.form.evidence){
              UploadService.deleteFile(this.form.email,this.form.evidence).then(res=>{
                if (res.data==1){
                  this.$message({
                    message: '已删除无效文件!',
                    type: 'success',
                  })
                }
              })
            }

          })

        }else {
          //未通过
          this.$message.error('请检查并修改输入信息！')
          return false
        }

      })
    },
  },
}
</script>
<style scoped>
.outter-wrapper{
  padding-top: 50px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.el-card-row {
  margin: 0 auto;
  width: 55%;
}

.box-card {
  /* width: 480px; */
}
.el-card__header span {
  color: #409eff;
  font-weight: 700;
}
.box-card:hover {
  /* width: 480px; */
  box-shadow: 0 5px 15px 0 rgb(0 0 0 / 30%);
}
.el-button-sendcode {
  background-color: #17a2b8;
}

.el-select,
.el-date-editor {
  /* width: 346.5px; */
  width: 100%;
}
.upload-tip-info {
  color: #ccc;
}
</style>
